{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <form name="Form" role="search" action="/oratk_app/oratk_select_ora" onsubmit="return validateForm()"
              target="_blank" method="POST">
            <h2 class="page-header">ORATK 工具</h2>
            {#    <div class="table-responsive">#}
            <div class="navbar-form navbar-left">
                &nbsp 选择实例: &nbsp
                {#                <select class="form-control" name="conn_string" id="conn_string">#}
                <select class="selectpicker show-tick "  style="width:450px" data-live-search="true"  name="conn_string" id="conn_string">

                    <option id="def">--请选择实例名--</option>
                    {% for i in instanceinfo_result %}
                        <option id="a" >{{ i.dbname }}={{ i.conn_string }}</option>
                    {% endfor %}
                </select>

                &nbsp 选择功能点: &nbsp
                {#            <div class="navbar-form col-sm-10" style="width: 350px">#}
                <select class=" selectpicker show-tick   " style="width: 350px" name="tool_name" id="tool_name"
                        data-live-search="true">
                    <option id="def">--请选择查询项--</option>
                    {% for i in oratk_tool_info %}
                        <option id="a">{{ i.name }}</option>
                    {% endfor %}
                </select>
                {#            </div>#}
                <button type="button" class="btn btn-default" id="btSearch">查询(本页展示）</button>
                <button type="submit" class="btn btn-default" id="btSearch_new">查询(新页展示）</button>
                <div id='exec_type_tag'>&nbsp</div>
                <h2 class="page-header">功能点-参数配置</h2>
                <div id="args_detail" class="form-horizontal"></div>
                <div id="tab_detail"></div>
            </div>
        </form>

    </div>

{% endblock %}

{% block script %}
    <script>
        //根绝不同的功能点进行ajax访问数据库返回参数列表
        $('#tool_name').change(function () {
            tool_name_id = $('#tool_name').find("option:checked").attr("id");
            if (tool_name_id == 'a') {
                console.log(1)
                $.ajax({
                    type: "POST",
                    data: {
                        'tool_name': $('#tool_name').val()
                    },
                    url: "/oratk_app/oratk_select_ora_args_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    success: function (result) {
                        console.log(result)
                        $("#args_detail").html(result);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })
            } else {
                $("#args_detail").empty()
                $("#args_detail").append('<span style="color: red" >请选择查询项</span>');
            }
        })

        //新页展示按钮执行前判断输入框是否有空值
        function validateForm() {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            var select_name = $('#tool_name').find("option:checked").attr("id")
            if (select_conn == 'def') {
                alert('请选择实例')
                return false;
            } else if (select_name == 'def') {
                alert('请选择查询项')
                return false;
            }
            //判断参数列表输入框是否有空值
            //循环参数列表中所有的input框
            var i = 1
            var arr = []
            $("#args_detail input[type=text]").each(function () {
                var v = $(this).val();
                if (v == '') {
                    val = $(this).attr("val")
                    arr.push(val)
                    i = i + 1
                }
            });
            if (i > 1) {
                alert('参数值不能为空\n' +
                    '[' + arr + ']');
                return false;
            }


            var tool_name_arg_count = $("#arg").val();
            //当参数个数为1个时
            if (tool_name_arg_count == 1) {
                if ($('#arg1').val() == '') {
                    alert('请输入要查询的关键字')
                    return false;
                }
            }
        }

        //当点击"查询(本页展示)时，输入框值检查及ajax异步调用"
        $('#btSearch').click(function () {
            var select_conn = $('#conn_string').find("option:checked").attr("id")
            var select_name = $('#tool_name').find("option:checked").attr("id")
            {#console.log(select_conn)#}
            if (select_conn == 'def') {
                alert('请选择实例')
                return;
            } else if (select_name == 'def') {
                alert('请选择查询项')
                return;
            }


            //判断参数列表输入框是否有空值
            //循环参数列表中所有的input框
            var i = 1
            var arr = []
            var args_list = []
            $("#args_detail input[type=text]").each(function () {
                var v = $(this).val();
                if (v == '') {
                    val = $(this).attr("val")
                    arr.push(val)
                    i = i + 1
                }
                //如果有参数把参数放入list中
                else {
                    args_list.push(v)
                }
            });
            if (i > 1) {
                alert('参数值不能为空\n' +
                    '[' + arr + ']');
                return false;
            }
            exec_type = $('#exec_type').val()
            //发送ajax请求
            $.ajax({
                type: "POST",
                data: {
                    'conn_string': $('#conn_string').val(),
                    'tool_name': $('#tool_name').val(),
                    'args': JSON.stringify(args_list),
                    'exec_type': exec_type,
                    'submit_id': 0
                },
                url: "/oratk_app/oratk_select_ora", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#tab_detail").html(result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            })


        })

    </script>

{% endblock %}